//查询所有考试
<template>
  <div class="exam">
    <div class="wrapper">
      <ul class="top">
        <li class="search-li">
          <el-select style="width: 200px;margin: 0 5px;" v-model="institute" placeholder="所属学院" filterable clearable>
            <el-option v-for="(college, index) in colleges" :key="index" :label="college.name" :value="college.name">
            </el-option>
          </el-select>
        </li>
        <li class="search-li">
          <el-select style="width: 200px;" v-model="major" placeholder="所属专业" filterable clearable>
            <el-option v-for="(major, index) in majors" :key="index" :label="major.name" :value="major.name">
            </el-option>
          </el-select>
        </li>
        <li class="search-li">
          <div class="icon"><input type="text" placeholder="试卷名称" class="search" v-model="key"></div>
        </li>
        <li><el-button type="warning" @click="search()">搜索</el-button></li>
      </ul>
    </div>

    <el-table :data="pagination.records" border stripe fit>
      <el-table-column fixed="left" prop="source" label="试卷名称" width="180"></el-table-column>
      <el-table-column prop="institute" label="所属学院" :span="4"></el-table-column>
      <el-table-column prop="major" label="所属专业" :span="4"></el-table-column>
      <el-table-column prop="grade" label="年级" width="100"></el-table-column>
      <el-table-column prop="examDate" label="考试日期" width="120"></el-table-column>
      <el-table-column prop="totalTime" label="持续时间" width="120"></el-table-column>
      <el-table-column prop="totalScore" label="总分" width="120"></el-table-column>
      <el-table-column prop="type" label="试卷类型" width="120"></el-table-column>
     
      <el-table-column fixed="right" label="操作" width="150">
        <template slot-scope="scope">
          <el-button @click="edit(scope.row.examCode)" type="primary" size="small">编辑</el-button>
          <el-button @click="deleteRecord(scope.row.examCode)" type="danger" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="pagination.current" :page-sizes="[4, 8, 10, 20]" :page-size="pagination.size"
      layout="total, sizes, prev, pager, next, jumper" :total="pagination.total" class="page">
    </el-pagination>
    <!-- 编辑对话框-->
    <el-dialog title="编辑试卷信息" :visible.sync="dialogVisible" width="30%" >
      <section class="update">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="试卷名称">
            <el-input v-model="form.source"></el-input>
          </el-form-item>
          <el-form-item label="介绍">
            <el-input v-model="form.description"></el-input>
          </el-form-item>
          <el-form-item label="所属学院">
            <el-input v-model="form.institute"></el-input>
          </el-form-item>
          <el-form-item label="所属专业">
            <el-input v-model="form.major"></el-input>
          </el-form-item>
          <el-form-item label="年级">
            <el-input v-model="form.grade"></el-input>
          </el-form-item>
          <el-form-item label="考试日期">
            <el-col :span="11">
              <el-date-picker type="date" placeholder="选择日期" v-model="form.examDate"
                style="width: 100%;"></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="持续时间">
            <el-input v-model="form.totalTime"></el-input>
          </el-form-item>
          <el-form-item label="总分">
            <el-input v-model="form.totalScore"></el-input>
          </el-form-item>
          <el-form-item label="试卷类型">
            <el-input v-model="form.type"></el-input>
          </el-form-item>
          <el-form-item label="考生提示">
            <el-input type="textarea" v-model="form.tips"></el-input>
          </el-form-item>
        </el-form>
      </section>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        institute:'',
        major:'',
        form: {}, //保存点击以后当前试卷的信息
        pagination: { //分页后的考试信息
          current: 1, //当前页
          total: null, //记录条数
          size: 4 //每页条数
        },
        key: '',
        dialogVisible: false,
        colleges: [ // 定义学院数组
          { id: 1, name: '计算机与信息工程学院' },
          { id: 2, name: '软件工程学院' },
          { id: 3, name: '信息工程学院' },
          { id: 4, name: '电子与通信工程学院' },
          { id: 5, name: '自动化学院' },
        ],
        majors: [ // 定义常见专业数组
          { id: 1, name: '计算机科学与技术' },
          { id: 2, name: '软件工程' },
          { id: 3, name: '信息安全' },
          { id: 4, name: '电子商务' },
          { id: 5, name: '计算机网络' },
          { id: 6, name: '通信工程' },
          { id: 7, name: '物联网工程' },
        ]
      }
    },
    created() {
      this.getExamInfo()
    },
    methods: {
      //搜索试卷
      search() {
        this.$axios('/api/exams').then(res => {
          if (res.data.code == 200) {
            let allExam = res.data.data
            let newPage = allExam.filter(item => {
              return item.source.includes(this.key)
            })
            let rel = newPage.filter(item => {
              return item.institute.includes(this.institute)
            })

            let rel_1 = rel.filter(item => {
              return item.major.includes(this.major)
            })
            this.pagination.records = rel_1
            this.pagination.total = rel_1.length
          }
        })
      },
      edit(examCode) { //编辑试卷
        this.dialogVisible = true
        this.$axios(`/api/exam/${examCode}`).then(res => { //根据试卷id请求后台
          if (res.data.code == 200) {
            this.form = res.data.data
          }
        })
      },
      submit() { //提交修改后的试卷信息
        this.dialogVisible = false
        this.$axios({
          url: '/api/exam',
          method: 'put',
          data: {
            ...this.form
          }
        }).then(res => {
          if (res.data.code == 200) {
            this.$message({ //成功修改提示
              message: '更新成功',
              type: 'success'
            })
          }
          this.getExamInfo()
        })
      },
      deleteRecord(examCode) {
        this.$confirm("确认删除", "提示", {
          confirmButtonText: '删除',
          cancelButtonText: '取消留着',
          type: 'danger'
        }).then(() => { //确认删除
          this.$axios({
            url: `/api/exam/${examCode}`,
            method: 'delete',
          }).then(res => {
            this.getExamInfo()
          })
        }).catch(() => {

        })
      },
      getExamInfo() { //分页查询所有试卷信息
        this.$axios(`/api/exams/${this.pagination.current}/${this.pagination.size}`).then(res => {
          this.pagination = res.data.data
        }).catch(error => {
        })
      },
      //改变当前记录条数
      handleSizeChange(val) {
        this.pagination.size = val
        this.search()
      },
      //改变当前页码，重新发送请求
      handleCurrentChange(val) {
        this.pagination.current = val
        this.search()
      },
    },
  };
</script>
<style lang="less" scoped>
  .exam {
    padding: 0px 40px;

    .page {
      margin-top: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .edit {
      margin-left: 20px;
    }
  }
</style>
<style lang="less" scoped>
  .pagination {
    padding: 20px 0px 30px 0px;

    .el-pagination {
      display: flex;
      justify-content: center;
    }
  }

  .paper {
    h4 {
      cursor: pointer;
    }
  }

  .paper .item a {
    color: #000;
  }

  .wrapper .top .order {
    cursor: pointer;
    width: 80px;
  }

  .wrapper .top .order:hover {
    color: #0195ff;
    border-bottom: 2px solid #0195ff;
  }

  .wrapper .top .order:visited {
    color: #0195ff;
    border-bottom: 2px solid #0195ff;
  }

  .item .info i {
    margin-right: 5px;
    color: #0195ff;
  }

  .item .info span {
    margin-right: 14px;
  }

  .paper .item {
    width: 380px;
    border-radius: 4px;
    padding: 20px 30px;
    border: 1px solid #eee;
    box-shadow: 0 0 4px 2px rgba(217, 222, 234, 0.3);
    transition: all 0.6s ease;
  }

  .paper .item:hover {
    box-shadow: 0 0 4px 2px rgba(140, 193, 248, 0.45);
    transform: scale(1.03);
  }

  .paper .item .info {
    font-size: 14px;
    color: #88949b;
  }

  .paper .item .name {
    font-size: 14px;
    color: #88949b;
  }

  .paper * {
    margin: 20px 0;
  }

  .wrapper .paper {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
  }

  .top .el-icon-search {
    position: absolute;
    right: 10px;
    top: 10px;
  }

  .top .icon {
    position: relative;
  }

  .wrapper .top {
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
  }

  .search-li {
    margin-left: 0px;
    /* padding-left: 740px; */
  }

  .top .search-li {
    margin-left: 0px;
  }

  .top {
  
    display: flex;
    justify-content: center;
  }

  .top li {
    display: flex;
    justify-content: space-between;
  }

  .top .search {
    margin-left: 1px;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #eee;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  }

  .top .search:hover {
    color: #0195ff;
    border-color: #0195ff;
  }

  .wrapper .top {
    display: flex;
  }

  .wrapper .top li {
    margin: 20px 10px;
  }



</style>